<script lang="ts" setup>
import { ref, reactive, shallowRef } from 'vue';
import { Config, Value } from '@/components/demo/screening/screening';

import axios from 'axios';
import Screening from '@/components/demo/screening/screening.vue';
import ModelComponent from '@/components/demo/screening/model-component.vue';

import { Search } from '@element-plus/icons-vue';
import treeData from '@/assets/api/cascader.json';

const screeningConfig = reactive<Config[]>([
  {
    key: 'input',
    label: 'input',
    component: 'el-input',
    value: '',
    defaultValue: '',
    bind: {
      type: 'text',
      placeholder: '请输入',
      prefixIcon: shallowRef(Search)
    }
  },
  {
    key: 'inputDisabled',
    label: 'inputDisabled',
    component: 'el-input',
    value: '',
    defaultValue: '',
    bind: {
      type: 'text',
      placeholder: '请输入',
      prefixIcon: shallowRef(Search),
      suffix: true,
      disabled: true
    }
  },
  {
    key: 'select',
    label: 'select',
    component: 'el-select',
    value: '',
    defaultValue: '',
    bind: {
      placeholder: '请选择',
      options: async () => {
        const result = await axios.get(`http://localhost:3000/src/assets/api/address.json`);
        return result.data;
      }
    }
  },
  {
    key: 'treeSelect',
    label: 'elTreeSelect',
    component: 'el-tree-select',
    value: '',
    defaultValue: '',
    bind: {
      data: treeData,
      multiple: true,
      showCheckbox: true
    }
  },
  {
    key: 'timeSelect',
    label: 'timeSelect',
    component: 'el-time-select',
    value: '',
    defaultValue: '',
    bind: {
      start: '08:30',
      step: '00:15',
      end: '18:30',
      placeholder: '请选择'
    }
  },
  {
    key: 'timePicker',
    label: 'timePicker',
    component: 'el-time-picker',
    value: new Date(),
    defaultValue: new Date(),
    bind: {
      clearable: false
    }
  },
  {
    key: 'datePicker',
    label: 'datePicker',
    component: 'el-date-picker',
    value: new Date(),
    defaultValue: new Date(),
    bind: {
      type: 'date',
      clearable: false,
      disabledDate: (time: Date) => {
        return time.getTime() > Date.now();
      }
    }
  },
  {
    key: 'dateTime',
    label: 'dateTime',
    component: 'el-date-picker',
    value: new Date(),
    defaultValue: new Date(),
    bind: {
      clearable: false,
      type: 'datetime',
      placeholder: '请选择时间',
      disabledDate: (time: Date) => {
        return time.getTime() > Date.now();
      }
    }
  },
  {
    key: 'dateRange',
    label: 'daterange',
    component: 'el-date-picker',
    value: [new Date(), new Date()],
    defaultValue: [new Date(), new Date()],
    bind: {
      type: 'daterange',
      clearable: false,
      disabledDate: (time: Date) => {
        return time.getTime() > Date.now();
      }
    }
  },
  {
    key: 'inputNumber',
    label: 'inputNumber',
    component: 'el-input-number',
    value: 1,
    defaultValue: 1
  },
  {
    key: 'cascader',
    label: 'cascader',
    component: 'el-cascader',
    value: [],
    defaultValue: [],
    bind: {
      options: async () => {
        const result = await axios.get(`http://localhost:3000/src/assets/api/cascader.json`);
        return result.data;
      }
    }
  },
  {
    key: 'switch',
    label: 'switch',
    component: 'el-switch',
    value: false,
    defaultValue: false,
    flexAuto: true
  },
  {
    key: 'checkbox',
    component: 'el-checkbox',
    value: false,
    defaultValue: false,
    flexAuto: true
  },
  {
    key: 'checkboxGroup',
    component: 'el-checkbox-group',
    value: [0],
    defaultValue: [0],
    flexAuto: true
  },
  {
    key: 'radioGroup',
    label: 'radioGroup',
    component: 'el-radio-group',
    value: 1,
    defaultValue: 1,
    flexAuto: true
  },
  {
    key: 'modelComponent',
    label: 'vModelCustomize',
    component: shallowRef(ModelComponent),
    value: false,
    defaultValue: false,
    flexAuto: true
  }
]);
const resetHandle = () => {};

const searchData = ref();
const searchHandle = (data: { [key: string]: Value }) => {
  searchData.value = data;
};

// 移除label
const removeLabel = ref(true);
let labelList: string[] = [];
const changeSwitchHandle = (event: boolean) => {
  event && (labelList = []);
  screeningConfig.forEach((config, index) => {
    if (event) {
      labelList.push(config.label!);
      delete config.label;
    } else {
      config.label = labelList[index];
    }
  });
};
changeSwitchHandle(true);
</script>

<template>
  <div class="screening-container p-2">
    <el-switch
      class="pb-2"
      v-model="removeLabel"
      active-text="移除 Label"
      @change="changeSwitchHandle($event)"
    ></el-switch>

    <Screening v-bind="{ config: screeningConfig }" @update:config="resetHandle()" @search="searchHandle($event)">
      <template #sr-left>
        <el-button type="primary">左侧插槽</el-button>
      </template>
      <template #sr-right>
        <el-button>右侧插槽</el-button>
      </template>
      <template #select="{ config }">
        <el-option v-for="option of config.bind!.options" :key="option.id" :label="option.name" :value="option.id" />
      </template>
      <template #radioGroup>
        <el-radio :label="1">Radio A</el-radio>
        <el-radio :label="2" :disabled="true">Radio B</el-radio>
      </template>
      <template #checkboxGroup>
        <el-checkbox :label="0" :disabled="true">Checkbox A</el-checkbox>
        <el-checkbox :label="1">Checkbox B</el-checkbox>
        <el-checkbox :label="2">Checkbox C</el-checkbox>
      </template>
      <template #checkbox="{ config }">全部选择 {{ config.value }}</template>
      <template #suffix_inputDisabled>
        <button class="text-xs text-buhler-primary">选择</button>
      </template>
    </Screening>
    <pre class="m-2">{{ searchData }}</pre>
  </div>
</template>

<style lang="scss" scoped>
.choose {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f3f3f3;
}
</style>
